import { useEffect, useRef } from 'react';

/**
 * DOM观察组件，用于监听DOM变化并执行回调
 * @param {Object} props
 * @param {Element|string} props.target - 要观察的DOM元素或选择器
 * @param {Function} props.callback - DOM变化时的回调函数
 * @param {Object} props.options - 观察选项
 * @param {boolean} props.options.childList - 是否监测目标元素的子节点变化
 * @param {boolean} props.options.attributes - 是否监测目标元素的属性值变化
 * @param {boolean} props.options.subtree - 是否监测目标元素的所有后代节点
 * @param {number} props.options.throttle - 回调函数的节流时间（毫秒）
 * @param {boolean} props.options.first - 是否在观察开始时立即执行一次回调函数
 * @returns {null}
 */
const DOMObserver = ({ target, callback, options = {} }) => {
  const observerRef = useRef(null);
  
  useEffect(() => {
    // 合并默认选项
    const opts = {
      childList: true,
      attributes: false,
      subtree: true,
      throttle: 1000,
      first: true,
      ...options
    };

    // 获取目标元素
    const element = typeof target === 'string' 
      ? document.querySelector(target) 
      : target;
    
    if (!element) {
      console.warn('DOMObserver: 目标元素未找到');
      return;
    }

    // 如果设置了first，立即执行一次回调
    if (opts.first) {
      callback(element);
    }

    // 节流函数
    let lastTime = 0;
    const throttledCallback = (mutations) => {
      const now = Date.now();
      if (now - lastTime >= opts.throttle) {
        callback(element, mutations);
        lastTime = now;
      }
    };
   
    // 创建并启动观察者
    const observer = new MutationObserver(throttledCallback);
    observer.observe(element, {
      childList: opts.childList,
      attributes: opts.attributes,
      subtree: opts.subtree
    });
    
    observerRef.current = observer;

    // 清理函数
    return () => {
      if (observerRef.current) {
        observerRef.current.disconnect();
      }
    };
  }, [target, callback, options]);

  return null;
};

export default DOMObserver;